<template>
  <a-modal
    :open="open"
    :width="860"
    title="选择挂号记录"
    destroy-on-close
    centered
    :ok-button-props="{ disabled: !selectedItem.jzbh }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="w-full overflow-auto h-[400px]">
      <div
        v-for="(item, index) in resourceData"
        :key="index"
        :class="{ 'select-active': selectedItem.jzbh === item.jzbh }"
        class="w-full flex items-center overflow-hidden mt-4 query-border"
        @click="onSelect(item)"
      >
        <div class="w-full cursor-pointer">
          <div class="w-full flex justify-between mb-1">
            <LabelValue label="挂号类别" label-class="font-bold" :width="220" value-class="font-bold" :value="item.ghlb" />
            <LabelValue label="挂号科室" label-class="font-bold" value-class="font-bold" :value="item.ksmc" />
            <LabelValue label="挂号医生" label-class="font-bold" :width="220" value-class="font-bold" :value="item.empName" />
          </div>
          <div class="w-full flex justify-between">
            <LabelValue label="门诊流水号" label-class="font-bold" :width="220" value-class="font-bold" :value="item.jzbh" />
            <LabelValue label="挂号人员" label-class="font-bold" value-class="font-bold" :value="item.czymc" />
            <LabelValue label="挂号时间" label-class="font-bold" :width="220" value-class="font-bold" :value="item.ghsj" />
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="onOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'

const emit = defineEmits(['update:open', 'ok'])
const props = defineProps({
  open: Boolean,
  resourceData: {
    type: Array,
    default: () => []
  }
})
const selectedItem = ref({})
const onCancel = () => {
  emit('update:open', false)
}
const onSelect = (row) => {
  selectedItem.value = row
}
const onOk = () => {
  emit('ok', selectedItem.value)
  emit('update:open', false)
}
watch(
  () => props.open,
  (val) => {
    if (val) selectedItem.value = {}
  }
)
</script>
<style lang="less" scoped>
.query-title {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.query-border {
  padding: 6px 10px;
  border: 1px dashed rgba(5, 5, 5, 0.2);
}
.query-border:hover {
  background: var(--secondary-color) !important;
}
.select-active {
  color: var(--primary-color);
  background: var(--secondary-color) !important;
  border: 1px dashed var(--primary-color) !important;
}
</style>
